<template>
  <el-row id="cpts-system-setting">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>

    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>系统设置</span>
        <el-button :disabled="!isViewEdit" @click="submitSettingInfo" style="padding: 6px 6px;margin-left: 1720px" type="primary">提交</el-button>
      </div>

      <el-row class="cpts-card-content">
        <el-collapse v-model="activeNames" accordion>
          <el-collapse-item title="采集项设置" name="1">
            <el-row >
              <span style="margin-right: 14px">数据采集周期:</span>
              <el-select @change="onCycleSelectChange" v-model="cycleValue" placeholder="请选择">
                <el-option
                  v-for="item in cycleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-row>
            <el-row style="margin-top: 20px">
              <span>日统计开始时间:</span>
              <el-select @change="onTimeSelectChange" v-model="timeValue" placeholder="请选择">
                <el-option
                  v-for="item in timeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span>-</span>
              <el-time-picker
                @change="onPicker1Change"
                v-model="selectDate1"
                value-format="HH:mm:ss"
                placeholder="选择日期时间">
              </el-time-picker>
              <span style="margin-left: 20px">日统计结束时间:</span>
              <el-select @change="onTimeSelectChange2" v-model="timeValue2" placeholder="请选择">
                <el-option
                  v-for="item in timeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span>-</span>
              <el-time-picker
                @change="onPicker1Change2"
                v-model="selectDate2"
                value-format="HH:mm:ss"
                placeholder="选择日期时间">
              </el-time-picker>
            </el-row>

          </el-collapse-item>
          <el-collapse-item title="集中供水设置" name="2">
           <!-- <el-row class="other-setting-magin">
              <span>名称:</span>
              <el-input v-model="rangeName" placeholder="请输入名字"></el-input>
              <span style="margin-left: 20px">选择时间段:</span>
              <el-time-picker
                @change="onSelectChange"
                is-range
                v-model="rangeTime"
                value-format="HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
              <el-button style="margin-left: 10px" @click="addRangeTime">添加</el-button>
            </el-row>-->
            <el-row class="other-setting-magin">
              <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%;"
                max-height="220">
                <el-table-column
                  prop="name"
                  label="名称">
                </el-table-column>
                <el-table-column
                  prop="startTime"
                  label="开始时间">
                </el-table-column>
                <el-table-column
                  prop="endTime"
                  label="结束时间">
                </el-table-column>

                <el-table-column label="操作"  align="center"  fixed="right" width="140px">
                  <template slot-scope="scope">
                    <el-button :disabled="!isViewEdit"
                               size="mini"
                               type="text"
                               @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                   <!-- <el-button :disabled="!isViewEdit"
                               size="mini"
                               type="text"
                               @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                  </template>
                </el-table-column>
              </el-table>
            </el-row>

          </el-collapse-item>
          <el-collapse-item title="允许开热泵时间段" name="3">
            <el-row class="other-setting-magin">
              <span style="margin-left: 20px">选择时间段:</span>
              <el-time-picker
                @change="onSelectChange"
                is-range
                v-model="hotRangeTime"
                value-format="HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
              <el-button style="margin-left: 10px" @click="fixHotDate(1)">确定</el-button>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="允许补水时间段" name="4">
            <el-row class="other-setting-magin">
              <span style="margin-left: 20px">选择时间段:</span>
              <el-time-picker
                @change="onSelectChange"
                is-range
                v-model="replenishRangeTime"
                value-format="HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
              <el-button style="margin-left: 10px" @click="fixHotDate(2)">确定</el-button>
            </el-row>
          </el-collapse-item>
         <!-- <el-collapse-item title="自动/手动" name="5">
            <el-row class="other-setting-magin">
              <span>水箱温度设定自动:</span>
              <el-switch
                class="other-setting-switch-magin"
                v-model="remoteControlValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              <span style="margin-left: 20px">水箱液位设定自动:</span>
              <el-switch
                class="other-setting-switch-magin"
                v-model="warnCenterValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              <span style="margin-left: 20px">电辅热远程开关自动:</span>
              <el-switch
                class="other-setting-switch-magin"
                v-model="ruleCenterValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              <span style="margin-left: 20px">太阳能温度设定自动:</span>
              <el-switch
                class="other-setting-switch-magin"
                v-model="ruleCenterValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              <span style="margin-left: 20px">允许补水时间自动调整:</span>
              <el-switch
                class="other-setting-switch-magin"
                v-model="ruleCenterValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              <span style="margin-left: 20px">补水温度下限自动:</span>
              <el-switch
                class="other-setting-switch-magin"
                v-model="ruleCenterValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="其它设置" name="6">
            <el-row class="other-setting-magin">
              <span>远程控制:</span>
              <el-switch
                class="other-setting-switch-magin"
                v-model="remoteControlValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              <span style="margin-left: 20px">报警中心:</span>
              <el-switch
                class="other-setting-switch-magin"
                v-model="warnCenterValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              <span style="margin-left: 20px">规则引擎:</span>
              <el-switch
                class="other-setting-switch-magin"
                v-model="ruleCenterValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-row>
          </el-collapse-item>-->
        </el-collapse>

      </el-row>
    </el-card>

    <!--供水时间编辑弹窗-->
    <el-dialog :visible.sync="editDialogShow">
      <el-row slot="title" type="flex">
        <span style="font-size: 18px">供水时间编辑</span>
      </el-row>

      <el-row class="config-dialog-content">
        <span style="margin-left: 20px">编辑时间段:</span>
        <el-time-picker
          @change="onSelectChange"
          is-range
          v-model="rangeTime"
          value-format="HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
        <el-button style="margin-left: 10px" @click="fixHotDate(3)">提交</el-button>
      </el-row>
    </el-dialog>

  </el-row>
</template>

<script>
  export default {
    name: 'systemSetting',
    data(){
      return {
        isViewShow: true,
        isViewEdit: true,
        activeNames: ['1'],
        cycleValue: 1,
        cycleOptions:[{label:"实时",value: 1},{label:"15min",value: 2},{label:"30min",value: 3},{label:"1h",value: 4}],
        timeValue: 1,
        timeValue2: 1,
        timeOptions:[{label:"当日",value: 1},{label:"次日",value: 2}],
        pickerType: "date",
        dateFormat: "yyyy-MM-dd",
        selectDate1: new Date(),
        selectDate2: new Date(),
        remoteControlValue: true,
        warnCenterValue: true,
        ruleCenterValue: true,
        tableData: [],
        rangeTime: '',
        rangeName: '',
        hotRangeTime: '',
        replenishRangeTime: '',
        hotConfigId: '',
        replenishConfigId: '',
        selectDate: '',
        editDialogShow: false
      }
    },
    mounted(){
      let obj = this.validateGlobal.getPermission(20)
      this.isViewShow = obj.isViewShow
      this.isViewEdit = obj.isViewEdit
      this.askSettingInfo()
      this.askCustomDate()
    },
    methods:{
      submitSettingInfo: function(){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.setting.update + "?userId=" + userId
        let askData = {
          sysConfigId: _that.sysConfigId,
          statType: _that.cycleValue,
          dailyStartType: _that.timeValue,
          startTime: _that.selectDate1,
          endTime: _that.selectDate2,
          dailyEndType: _that.timeValue2,
          remoteControlSwitch: _that.remoteControlValue,
          alarmCenterSwitch: _that.warnCenterValue,
          ruleSwitch: _that.ruleCenterValue,
        }
        this.http.post(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.askSettingInfo()
            _that.$message('更新成功!');
          }else{
            _that.$message('更新失败!');
          }
        })
      },
      handleEdit: function(index,row){
        this.selectDate = row
        this.rangeTime = [row.startTime,row.endTime]
        if (this.editDialogShow){
          this.editDialogShow = false
        } else{
          this.editDialogShow = true
        }
      },
      handleDelete: function(index,row){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.setting.rangeTimeDelete
        let askData = {
          userId: userId,
          waterSupplyTimeId: row.waterSupplyTimeId,
        }
        this.http.postForm(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.askSettingInfo()
            _that.$message('删除成功!');
          }else{
            _that.$message('删除失败!');
          }
        })
      },
      addRangeTime: function(){
        if (this.rangeTime && this.rangeTime.length == 2) {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.setting.rangeTime + "?userId=" + userId
          let askData = {
            name: _that.rangeName,
            startTime: _that.rangeTime[0],
            endTime: _that.rangeTime[1]
          }
          this.http.post(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.askSettingInfo()
              _that.$message('新增成功!');
            }else{
              _that.$message('新增失败!');
            }
          })
        }else{
          this.$message("请选择正确的时间!")
        }
      },
      onSelectChange: function(value){
        this.rangeTime = value
      },
      onCycleSelectChange: function(value) {
        if (value == 1){
          this.cycleValue = value
        } else{
          this.$message("该功能暂未开放!")
        }
      },
      onTimeSelectChange: function(value) {
        this.timeValue = value
      },
      onPicker1Change: function(date) {
        this.selectDate1 = date
      },
      onTimeSelectChange2: function(value) {
        this.timeValue2 = value
      },
      onPicker1Change2: function(date) {
        this.selectDate2 = date
      },
      askSettingInfo: function() {
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.setting.info
        let askData = {
          userId: userId
        }
        this.http.get(url,askData, res => {
          console.log("mySysLists",res)
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            // _that.tableData = res.data.waterSupplyTimes
            _that.cycleValue = res.data.statType
            _that.timeValue = res.data.dailyStartType
            _that.timeValue2 = res.data.dailyEndType
            _that.selectDate1 = res.data.startTime
            _that.selectDate2 = res.data.endTime
            _that.remoteControlValue = res.data.remoteControlSwitch
            _that.warnCenterValue = res.data.alarmCenterSwitch
            _that.ruleCenterValue = res.data.ruleSwitch
            _that.sysConfigId = res.data.sysConfigId
          }else{
            _that.$message('获取数据失败!');
          }
        })
      },
      fixHotDate: function(type){
        let _that = this
        let url = _that.ports.setting.customDateFix
        let [startTime,endTime,sysDateConfigId] = ['','','']
        if (type === 1) {
          sysDateConfigId = _that.hotConfigId
          startTime = _that.hotRangeTime[0]
          endTime = _that.hotRangeTime[1]
        }if (type === 2) {
          sysDateConfigId = _that.replenishConfigId
          startTime = _that.replenishRangeTime[0]
          endTime = _that.replenishRangeTime[1]
        }if (type === 3) {
          sysDateConfigId = _that.selectDate.sysDateConfigId
          startTime = _that.rangeTime[0]
          endTime = _that.rangeTime[1]
        }
        let askData = {
          sysDateConfigId: sysDateConfigId,
          startTime: startTime,
          endTime: endTime
        }
        this.http.postForm(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.$message('修改成功!')
            _that.askCustomDate()
            if (_that.editDialogShow){
              _that.editDialogShow = false
            }
          }else{
            _that.$message('修改失败!');
          }
        })
      },
      askCustomDate: function() {
        let _that = this
        let gateway = sessionStorage.getItem("gateway")
        let url = _that.ports.setting.customDateList
        let askData = {
          sn: gateway
        }
        this.http.get(url,askData, res => {
          console.log("mySysLists",res)
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
             if (res.data){
               let arry = []
               for (let i = 0;i<res.data.length;++i){
                 if (res.data[i].type === 1){    // 供水时间段
                      if (res.data[i].timeType === 1) {
                        arry.push({name: "上午",startTime:res.data[i].startTime,endTime: res.data[i].endTime,sysDateConfigId:res.data[i].sysDateConfigId})
                      }
                      if (res.data[i].timeType === 2) {
                        arry.push({name: "中午",startTime:res.data[i].startTime,endTime: res.data[i].endTime,sysDateConfigId:res.data[i].sysDateConfigId })
                      }
                      if (res.data[i].timeType === 3) {
                        arry.push({name: "下午",startTime:res.data[i].startTime,endTime: res.data[i].endTime,sysDateConfigId:res.data[i].sysDateConfigId })
                      }
                 }
                 if (res.data[i].type === 2) {   // 热泵时间
                     _that.hotConfigId = res.data[i].sysDateConfigId
                     _that.hotRangeTime = [res.data[i].startTime,res.data[i].endTime]
                 }
                 if (res.data[i].type === 3) {   // 补水时间
                     _that.replenishConfigId = res.data[i].sysDateConfigId
                     _that.replenishRangeTime = [res.data[i].startTime,res.data[i].endTime]
                 }
               }
               _that.tableData = arry
             }
          }else{
            _that.$message('获取数据失败!');
          }
        })
      }
    },
  }
</script>

<style lang="less">
  #cpts-system-setting{

    .el-card {
      margin: 20px 20px 0 20px;
      height: 770px;
    }

    .cpts-card-content{

    }

    .other-setting-magin{
      margin-top: 20px;

      .el-input{
        width: 220px;
      }
    }

    .other-setting-switch-magin{
      margin-left: 10px;
    }
  }

</style>
